import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Typography, Table, Input, Row, Col, Icon, Button } from 'antd'
import { router } from 'utils'
import { stringify } from 'qs'
import { Trans, withI18n } from '@lingui/react'
import { Page } from 'components'
// import List from '../components/List'
const { Title } = Typography
const { Search } = Input

// const Option = Select.Option

@withI18n()
@connect(({ userauths, app, loading }) => ({ userauths, app, loading }))
class UserAuth extends PureComponent {
  state = {
    value: '',
  }

  render() {
    const { userauths, location, app, i18n } = this.props
    const { list, pagination } = userauths
    const { isMobile } = app
    const { query, pathname } = location
    const { value } = this.state
    const handleRefresh = newquery => {
      router.push({
        pathname,
        search: stringify({
          ...query,
          ...newquery,
        }),
      })
    }
    const onedititem = item => {
      router.push({
        pathname: `/auths/userauth/${item.objectId}`,
        search: stringify(location.query, { arrayFormat: 'repeat' }),
      })
    }
    const columns = [
      {
        title: i18n.t`Username`,
        dataIndex: 'username',
        key: 'username',
        // render: text => <span>{text}</a>,
      },
      {
        title: i18n.t`Role`,
        dataIndex: 'role',
        key: 'role',
      },
      {
        title: i18n.t`Operation`,
        key: 'Operation',
        render: (text, record, index) => {
          return (
            <Button
              size="small"
              onClick={e => {
                onedititem(record)
              }}
            >
              <Icon type="edit" />
            </Button>
          )
        },
      },
    ]
    const handlesearch = str => {
      handleRefresh({
        name: str,
      })
    }
    return (
      <Page inner>
        <div
          style={{
            paddingLeft: isMobile ? '0px' : '14px',
            paddingRight: isMobile ? '0px' : '14px',
            paddingTop: '0px',
          }}
        >
          <Row>
            <Col span={12}>
              <Title
                level={4}
                style={{ display: 'inline-block', marginRight: '10px' }}
              >
                <Trans>User Rights Management</Trans>:
              </Title>
            </Col>
            <Col span={12}>
              <Search
                enterButton
                value={value}
                onSearch={handlesearch}
                onChange={e => {
                  const { value } = e.target
                  this.setState({ value })
                }}
                placeholder={i18n.t`Search`}
              />
            </Col>
          </Row>
          <Table
            size="small"
            columns={columns}
            dataSource={list}
            style={{ marginTop: '10px' }}
            pagination={{
              ...pagination,
              showTotal: total => i18n.t`Total ${total} Items`,
            }}
            onChange={page => {
              handleRefresh({
                page: page.current,
                pageSize: page.pageSize,
              })
            }}
          />
        </div>
      </Page>
    )
  }
}

UserAuth.propTypes = {
  post: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}

export default UserAuth
